<template>
  <!-- 筛选条件 -->
  <div class="gg-type" style="margin-bottom: 100px;">
    <div class="type-1">
      <div class="hong"></div>
      <div class="type-tit">筛选条件</div>
    </div>
    <div>
      <div class="type-2 type-z" v-if="type == 1">
        <div class="fz">分组：</div>
        <el-radio-group class="type1" style="height: 24px;" v-model="checkList6" v-for="item in quality">
          <el-radio-button style="height: 24px;" class="company" :label="item.id">{{ item.name }}</el-radio-button>
        </el-radio-group>
        <div class="bj" @click="edit()">编辑</div>
      </div>
      <div class="type-2 type-z" v-else>
        <div class="fz">分组：</div>

        <div v-for="(item, index) in quality" :key="index" class="xg">
          <div class="shanchu"><img src="../../../../assets/img/组 7460@2x.png" alt=""></div>
          <el-input @focus="focusInput" v-model="item.name" />
        </div>
        <!-- <input v-model="pick" v-bind:value="a"> -->
        <!-- <input type="text" v-model="checkList6" v-for="item in quality">{{ item.name }}</input> -->
        <!-- <el-radio-group class="type2"  style="height: 24px;" v-model="checkList6" v-for="item in quality">
            <div class="shanchu"><img src="../../../../assets/img/组 7461@2x.png" alt=""></div>
            <input type="text" v-model="checkList6">{{ item.name }}</input>
        </el-radio-group> -->
        <div class="xinz" @click="add"><img src="../../../../assets/img/组 7459@2x.png" alt=""></div>
        <div class="bj" @click="determine()">确定</div>
      </div>
    </div>
    <div class="type-2 type-z">
      <div class="fz" style="line-height: 36px;">企业：</div>
      <el-input class="qe-inp" style="width: 380px;" type="text" v-model="input1" />
    </div>
    <div style="margin-top: 30px;">
      <el-table :data="tableData" :header-cell-style="{ backgroundColor: '#ECF4FF', color: '#333333' }"
        :row-class-name="tableRowClassName" style="width: 100%">
        <el-table-column prop="" label="公司名称">
        </el-table-column>
        <el-table-column prop="name" label="最新项目">
        </el-table-column>
        <el-table-column prop="address" label="分组">
          <template #default="scope">
            <el-select v-model="scope.row.type" placeholder="请选择" v-if="scope.row.type == null"> 
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    >
    </el-option>
  </el-select>
           <div v-else> {{types(scope.row.type)}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="更新时间">
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="handleClick(scope.row)" type="text" size="small">确定</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    >
    </el-pagination>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const type = ref(1)
const checkList6 = ref()
const input = ref()
const input1 = ref()
const currentPage4  =  ref(4)

let quality = [
  {
    id: "2",
    name: "全部",
  },
  {
    id: "3",
    name: "竞争对手",
  },
  {
    id: "4",
    name: "合作伙伴",
  },
];
const options= [
{
    id: "2",
    name: "全部",
  },
  {
    id: "3",
    name: "竞争对手",
  },
  {
    id: "4",
    name: "合作伙伴",
  },
        ]
       const value= ref()
const tableData = [{
  date: '2016-05-03',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1518 弄',
  type:1
}, {
  date: '2016-05-02',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1518 弄',
  type:3
}, {
  date: '2016-05-04',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1518 弄',
  type:2
}, {
  date: '2016-05-01',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1518 弄',
  type:null,
},]
const edit = () => {
  type.value = 0
}
const determine = () => {
  type.value = 1
}
const focusInput = (e) => {
  console.log(e.target.value);
}
const tableRowClassName = ({ row, rowIndex }) => {
    if (rowIndex === 1) {
      return 'warning-row'
    } else if (rowIndex === 3) {
      return 'success-row'
    }
    return ''
  }
const add = () => {
  let a = {
    id: null,
    name: ""
  }
 
  tableRowClassName()
  quality.push(a)
}
const handleSizeChange =(val)=> {
        console.log(`每页 ${val} 条`)
      }
      const handleCurrentChange =(val)=> {
        console.log(`当前页: ${val}`)
      }
      const types = (even) =>{
        let a
        options.forEach(element => {
          if (element.id == even) {
          a = element.name
          }

        });
        return a
      }
      
</script>
<style lang="scss" scoped>
.hong {
  width: 4px;
  height: 16px;
  background: #F43107;
  border-radius: 10px;
  margin-right: 6px;
}

.gg-type {
  // padding: 0 20px 0 0;
}

.type-1 {
  display: flex;

}

.type-2 {
  margin-top: 30px;
  display: flex;
  font-size: 16px;
  margin-left: 10px;

}

.xg {
  position: relative;
}

.fz {
  line-height: 28px;
}

.bj {
  background-color: #F43107;
  padding: 0 10px;
  color: #fff;
  border-radius: 4px;
  height: 28px;
  line-height: 28px;
  margin-left: 10px;
}

.type-tit {
  height: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 16px;
  color: #333333;
}

:deep(.el-input__inner) {
  width: fit-content;
}

.xg {
  // width: fit-content;
  margin-right: 10px;
  // width: 100px;
}

.shanchu {
  position: absolute;
  top: -10px;
  right: 0;
  width: 16px;
  height: 16px;
  z-index: 99;

  img {
    width: 100%;
    height: 100%;
  }
}

.xinz {
  width: 28px;
  height: 28px;
  margin-left: 10px;

  img {
    width: 100%;
    height: 100%;
  }
}

:deep(.el-input__wrapper) {
  height: 36px;
  background: #FFFFFF;
  border-radius: 4px;

}

:deep(.qe-inp .el-input__inner) {
  width: 380px !important;
}

:deep(.type1 .el-radio-button__inner) {
  font-size: 16px;
  height: 28px;
  padding: 5px 15px;
  background-color: transparent;
  border: none;
  border-left: none !important;
  margin-left: 10px;
}

:deep(.type2 .el-radio-button__inner) {
  font-size: 16px;
  height: 28px;
  padding: 5px 15px;
  margin-left: 10px;
  position: relative;
}

:deep(.type1 .is-active) {
  .el-radio-button__inner {
    background-color: #F43107;
    border: 1px solid #F43107;
  }

}

:deep(.el-radio-group :hover) {
  color: #F43107 !important;
}

:deep(.el-table__cell) {
  height: 44px;
}

/* 添加隔行变色的CSS */
:deep(.el-table .el-table__body tr.el-table__row:nth-child(even)) {
  background-color: #EDF0F6;
}

:deep(el-table .el-table__body tr.el-table__row:nth-child(odd)) {
  background-color: #ffffff;
}
.el-pagination{
  margin-top: 28px;
}
</style>